<template>
  <div class="currentSongList">
    <span class="defaultTip" v-if="songList.length>0?false:true">列表里还没有添加歌曲~</span>
    <div class="banner" @click="closeList"></div>
    <div class="songs">
      <div class="item"
           @click="selectSong(item.id, item.name, item.al.picUrl, item.ar, index)"
           v-for="(item, index) in songList">
        <span class="number">{{index+1}}</span>
        <div class="detail">
          <span class="songName">{{item.name}}</span>
          <span class="singer">{{getSingers(item.ar)}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CurrSongList",
    computed: {
      songList: function(){
        return this.$store.getters.currSongList;
      },
      getSingers: function () {
        return function(singers){
          let arr = singers.map((item) => {
            return item.name;
          });
          return  arr.join(' & ');
        };
      }
    },
    methods: {
      closeList(){
        this.$store.dispatch("setCurrSongListVisible", false);
      },
      selectSong(id, name, img, singers, index){
        this.$store.dispatch("setSong", null); //先清空歌曲
        let url = '';
        this.$axios.get(`/api/song/url?id=${id}`)
          .then(res => {
            url = res.data.data[0].url;
            this.setSong(id, url, name, img, singers, index);
          })
          .catch(err => console.log(err));
      },
      setSong(id, url, name, img, singers, index){
        // console.log(singers);
        let song = {};
        song.id = id;
        song.url = url;
        song.imgUrl = img;
        song.name = name;
        song.singers = singers;
        song.index = index;
        this.$store.dispatch("setSong", song);
        this.$store.dispatch("setMiniPlayerVisible", true);
        this.$store.dispatch("setIsInCurrList", true); //正在播放的歌曲是在当前播放列表里的
        this.$store.dispatch("setCurrSongIndex", index); //正在播放的歌曲是在当前播放列表里的
      }
    },
    mounted() {
    }
  }
</script>

<style scoped lang="scss">
  .currentSongList{
    width: 100vw;
    height: 100vw;
    max-height: 400px;
    color: white;
    padding-bottom: 30px;
    border-radius: 10px 10px 0 0;
    background: $dark-background;
    overflow: scroll;
    position: absolute;
    right: 0;
    bottom: 60px;
    z-index: -1;
    .defaultTip{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.4rem;
    }
    .banner{
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.1);
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .songs{
      width: 100vw;
      .item{
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid lightgreen;
        .number{
          width: 10vw;
          height: 60px;
          font-size: 0.3rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .detail{
          max-width: 88vw;
          height: 40px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .songName{
            max-width: 88vw;
            font-size: 0.3rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .singer{
            max-width: 88vw;
            font-size: 0.2rem;
            line-height: 0.3rem;
            color: #c6c6c6;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }

</style>